<template>
  <div>
    <h1 align="center">图书列表</h1>
    <el-card>
      <el-row :gutter="25">
        <el-col :span="10">
          <!--          <el-input placeholder="请输入搜索内容" v-model="searchList" clearable @clear="getBookList">-->
          <!--          <el-button slot="append" icon="el-icon-search" @click="getBookList"></el-button>-->
          <!--          </el-input>-->
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible=true">添加</el-button>
        </el-col>
      </el-row>
      <!--      用户列表 stripe 隔行变色-->
      <el-table :data="bookList" border stripe>
        <!--        索引列-->
        <el-table-column type="index"></el-table-column>
        <el-table-column label="图书名" prop="bookName"></el-table-column>
        <el-table-column label="价格" prop="price"></el-table-column>
        <el-table-column label="作者" prop="author"></el-table-column>
        <el-table-column label="图片">
          　　
          <template slot-scope="scope">
            <!--          显示图片-->
            　　　　<img :src="scope.row.picture" width="100" height="100"/>
          </template>

        </el-table-column>

        <el-table-column label="内容" prop="context"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <!--            修改-->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
            <!--            删除-->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteBook(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
<!--分页
@size-change="handleSizeChange"
-->
      <div>
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="pageNum"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
        </el-pagination>
      </div>
    </el-card>
    <!--    新增book区域-->
    <el-dialog title="添加书籍" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
      <el-form :model="addForm" :rules="addFormRoles"
               ref="addFormRef" label-width="100px">
        <el-form-item label="书籍名" prop="bookName">
          <el-input v-model="addForm.bookName"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="addForm.price"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input v-model="addForm.author"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="context">
          <el-input v-model="addForm.context"></el-input>
        </el-form-item>
        <el-form-item label="图片地址" prop="picture">
          <el-input v-model="addForm.picture"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible=false">取消</el-button>
        <el-button type="primary" @click="editBookInfo">确定</el-button>
      </span>
    </el-dialog>
    <!--    修改图书信息-->
    <el-dialog title="修改书籍" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
      <el-form :model="editForm" :rules="editFormRoles" ref="editFormRef" label-width="100px">
        <el-form-item label="书籍名" prop="bookName">
          <el-input v-model="editForm.bookName"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="editForm.price"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input v-model="editForm.author"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="context">
          <el-input v-model="editForm.context"></el-input>
        </el-form-item>
        <el-form-item label="图片地址" prop="picture">
          <el-input v-model="editForm.picture"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible=false">取消</el-button>
        <el-button type="primary" @click="editBook">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created() {
    this.getBookList();
  },
  data() {
    return {
      pageSize:0,
      pageNum:0,
      total:0,
      addDialogVisible: false,// 对话框状态
      editDialogVisible: false, //修改对话框状态
      editForm: {},
      bookList: [],
      searchList: [],
      addForm: {
        bookName: '',
        price: '',
        author: '',
        context: '',
        picture: ''
      },
      // 表单验证
      addFormRoles: {
        bookName: [
          {required: true, message: '请输入书名', trigger: 'blur',},
          {min: 2, max: 12, message: '长度在2-12个字符', trigger: 'blur'}
        ],
        price: [
          {required: true, message: '价格不能为空', trigger: 'blur',},
          {message: '价格必须为数字值'}
        ],
        author: [
          {required: true, message: '请输入作者', trigger: 'blur',},
          {min: 2, max: 12, message: '长度在2-12个字符', trigger: 'blur'}
        ],
        context: [
          {required: true, message: '请输入简介', trigger: 'blur',},
          {min: 10, max: 100, message: '长度在10-100个字符', trigger: 'blur'}
        ],
        picture: [
          {required: true, message: '请输入图片地址', trigger: 'blur',}
        ],
      },
      editFormRoles: {
        bookName: [
          {required: true, message: '请输入书名', trigger: 'blur',},
          {min: 2, max: 12, message: '长度在2-12个字符', trigger: 'blur'}
        ],
        price: [
          {required: true, message: '价格不能为空', trigger: 'blur',},
          {message: '价格必须为数字值'}
        ],
        author: [
          {required: true, message: '请输入作者', trigger: 'blur',},
          {min: 2, max: 12, message: '长度在2-12个字符', trigger: 'blur'}
        ],
        context: [
          {required: true, message: '请输入简介', trigger: 'blur',},
          {min: 10, max: 100, message: '长度在10-100个字符', trigger: 'blur'}
        ],
        picture: [
          {required: true, message: '请输入图片地址', trigger: 'blur',}
        ],
      },
    }
  },
  methods: {
    getBookList() {
      axios.get(`/books?pageNum=${this.pageNum}`).then(res => {
        this.bookList = res.data.list;
        this.pageSize=res.data.pageSize
        this.pageNum=res.data.pageNum
        this.total = res.data.total;
      })
    },
    // 最大数
    // handleSizeChange(val){
    //   console.log(`每页 ${val} 条`);
    //   this.getBookList();
    // },
    //pageNum
    // 获取当前页
    handleCurrentChange(val){
      console.log(`当前页: ${val}`);

      console.log(this.pageNum)
      this.pageNum=val;
      this.getBookList()


    },
    //监听用户
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },
    editDialogClosed() {
      this.$refs.editFormRef.resetFields();
    },
    editBookInfo() {
      this.$refs.addFormRef.validate(valid => {
        if (valid) {// 验证成功
          // 访问后台
          axios.put('/addBooks', this.addForm).then(res => {
            console.log(res)
            if (res.data != "success") {
              return this.$message.error("操作失败");
            }
            this.$message.success("操作成功");
            this.addDialogVisible = false
            this.getBookList();
          })
        }
      })
    },
    deleteBook(id) {
      axios.delete('deleteBook?id=').then(res => {
        if (res.data != "success") {
          return this.$message.error("操作失败");
        }
        this.$message.success("操作成功");
        this.getBookList();
      })
    },
    showEditDialog(id) {
      axios.get("getUpadte?id=" + id).then(res => {
        // console.log(res);
        this.editForm = res.data;
        this.editDialogVisible = true;
      })
    },
    editBook() {
      axios.put('editBook', this.editForm).then(res => {
        if (res.data != "success") {
          return this.$message.error("操作失败");
        }
        this.$message.success("操作成功");
        this.getBookList();
        this.editDialogVisible = false;
      })
    },

    // searchBook(){
    //   axios.get('selectBook',this.bookList).then(res =>{
    //     this.bookList = res.data
    //   })
    // }
  },

}
</script>

<style scoped>

</style>